<template>
  <div>
    <div class="" style="margin-bottom:30px;">
      <div style="font-size:18px;margin-bottom:15px;">选中用户：</div>
      <div>
        <el-tag style="margin-left:10px;margin-bottom:10px;" @close="handleClose(item,index)"
        v-for="(item,index) in selsectUser" :key="index" closable>
          {{item.userName}}
        </el-tag>
      </div>
    </div>
    <div class="flex_betw">
      <div>
        <el-input style="margin-bottom:10px;"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <el-tree
          :data="bumen"
          default-expand-all highlight-current
          :expand-on-click-node="false"
          ref="menu"
          node-key="deptId"
          empty-text="加载中，请稍候"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick">
        </el-tree>
      </div>
      <div class="flex_flex" style="margin-left:100px;overflow: hidden;">
        <div class="flex_hcneter_bet" style="margin-bottom:10px;">
          <div class="flex_hcneter">
            当前部门：{{selsctDeptObj.deptName}}
          </div>
          <div class="flex_hcneter">
            <el-button @click="handleGxUser" type="primary" plain>勾选当前部门下所有用户和所有子部门下所有用户</el-button>
            <el-button @click="handleQxGxUser" type="primary" plain>取消勾选当前部门下所有用户和所有子部门下所有用户</el-button>
          </div>
        </div>
        <el-table :border="Global.tableShowBorder" @select-all="handleSelectionChange"
        current-row-key="userId" row-key="userId"
        :data="userList" style="width:100%;" :key="selsctDeptObj.deptId" ref="multipleTable" @select="handleSelectionChange">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column label="用户名称" align="center" prop="userName"/>
          <el-table-column label="手机号" align="center" prop="phone"/>
          <el-table-column label="头像" align="center" prop="avatar">
            <template slot-scope="{row}">
              <el-image v-if="row.avatar"
                style="width: 100px; height: 100px;border-radius:50%;"
                :src="row.avatar" 
                :preview-src-list="[row.avatar]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="职位" align="center" prop="post"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserDeptTree,} from "@/api/collaWorryFree/myJob";

export default {
  name: "MyJob",
  dicts: [],
  props: {
    value: [Array],
  },
  data() {
    return {
      filterText: '',//部门树筛选
      defaultProps: {
        children: "children",
        label: "deptName"
      },
      userList:[],//用户数据
      selsectUser:[],//选中用户
      selsctDept:[],//选中的部门
      selsctDeptObj:{},//当前部门
      bumen:[],//部门数据
      valueList:[],//
    };
  },
  watch: {
    // value: {
    //   handler(val) {
    //     console.log('val',val)
    //     console.log('val',this.bumen)
    //   },
    //   deep: true,
    //   immediate: true
    // },
    filterText(val) {
      this.$refs.menu.filter(val);
    }
  },
  created() {
    this.selsectUser = []
    this.getUserDeptTree()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    handleClose(item,index){//标签删除用户
      this.selsectUser.splice(index,1)
      let selsectUser = this.selsectUser.map(item=>item.userId)
      this.$emit("input", selsectUser);
      this.$nextTick(()=>{
        this.qiehuanStatus()
      })
    },
    handleQxGxUser(){//取消勾选当前部门下子节点下所有用户
      this.getChart1([{...this.selsctDeptObj}],2)
    },
    handleGxUser(){//勾选当前部门下子节点下所有用户
      this.getChart1([{...this.selsctDeptObj}],1)
    },
    getChart1(data,type){//阶梯处理部门下拉数据 type:1勾选2取消勾选
      data.forEach((item,index) => {
        let userList = item.users || []
        if(type == 1) this.pjUserList(userList)
        if(type == 2) this.qxPjUserList(userList)
        let children = item.children || []
        if(children.length ) {
          this.getChart1(item.children,type)
        }
      });
    },
    qxPjUserList(userList){//取消拼接用户数据
      //找到在选中用户中数据进行删除
      let list = this.selsectUser.filter(item=>{
        return !userList.some(i=>item.userId == i.userId)
      })
      this.selsectUser = [...list]
      let selsectUser = this.selsectUser.map(item=>item.userId)
      this.$emit("input", selsectUser);
      this.qiehuanStatus()
    },
    pjUserList(userList){//拼接用户数据
      //找到不在选中用户中数据进行添加
      let list = userList.filter(item=>{
        return !this.selsectUser.some(i=>item.userId == i.userId)
      })
      this.selsectUser = this.selsectUser.concat(list)
      let selsectUser = this.selsectUser.map(item=>item.userId)
      this.$emit("input", selsectUser);
      this.qiehuanStatus()
    },
    qiehuanStatus(){//切换表格选中状态
      let userList = this.selsctDeptObj.users || [] 
      let list = userList.filter(item=>{
        return this.selsectUser.some(i=>item.userId == i.userId)
      })
      list.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row,true);
      });
      let list1 = userList.filter(item=>{
        return !this.selsectUser.some(i=>item.userId == i.userId)
      })
      list1.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row,false);
      });
    },
    handleNodeClick(data) {//部门点击
      console.log('handleNodeClick',data);
      this.selsctDeptObj = {...data}
      let userList = data.users || []
      this.userList = [...userList]
      this.$nextTick(()=>{
        this.qiehuanStatus()
      })
    },
    handleSelectionChange(val) {//表格复选框
      console.log('handleSelectionChange',val)
      //找到不在选中用户中数据进行添加
      let list = val.filter(item=>{
        return !this.selsectUser.some(i=>item.userId == i.userId)
      })
      this.selsectUser = this.selsectUser.concat(list)
      // 通过所选部门底下所有用户数据匹配复选框勾选事件选中，过滤出已经去小勾选的数据
      let userList = this.selsctDeptObj.users || []
      let noneList = userList.filter(item=>{
        return !val.some(i=>item.userId == i.userId)
      })
      let list1 = this.selsectUser.filter(item=>{
        return !noneList.some(i=>item.userId == i.userId)
      })
      this.selsectUser = [...list1]
      let selsectUser = this.selsectUser.map(item=>item.userId)
      this.$emit("input", selsectUser);
    },
    async getUserDeptTree(){//获取用户的可选人员部门树
      let res = await getUserDeptTree()
      let data = res.data || []
      this.bumen = data
      let value = this.value || []
      this.valueList = value.map(item=>{ return {userId:item,userName:item,} })
      this.getChart(this.bumen)
      if(data.length){
        let obj = data[0] || {}
        this.selsctDeptObj = {...obj}
        let userList = obj.users || []
        this.userList = [...userList]
      }
    },
    getChart(data){//阶梯处理部门下拉数据
      data.forEach((item,index) => {
        item.deptName = item.deptName + `(${item.deptType == 2 ? '部门' : '公司'})`
        let children = item.children || []
        let userList = item.users || []
        let value = this.value || []
        value.map((item,index)=>{
          let obj = userList.find(item1=>item1.userId == item)
          if(obj) {
            this.valueList[index] = {...obj}
            this.selsectUser = [...this.valueList]
          }
        })
        if(children.length ) {
          this.getChart(item.children)
        }else{
          delete item.children
        }
      });
    },
  }
};
</script>
